<template>
  <div class="dashboard-container">
    <!-- 标题和导航 -->
    <div class="dashboard-header">
      <h2>生产数据可视化看板</h2>
      <div class="time-filter">
        <el-date-picker
            v-model="timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleTimeChange"
        />
      </div>
    </div>

    <!-- 主要指标卡片 -->
    <div class="metrics-row">
      <div class="metric-card">
        <div class="metric-title">总工单数</div>
        <div class="metric-value">1,248</div>
        <div class="metric-change up">↑12% 较上月</div>
      </div>
      <div class="metric-card">
        <div class="metric-title">材料消耗总量</div>
        <div class="metric-value">3,456kg</div>
        <div class="metric-change down">↓5% 较上月</div>
      </div>
      <div class="metric-card">
        <div class="metric-title">平均合格率</div>
        <div class="metric-value">92.5%</div>
        <div class="metric-change up">↑2.3% 较上月</div>
      </div>
      <div class="metric-card">
        <div class="metric-title">缺陷率</div>
        <div class="metric-value">3.8%</div>
        <div class="metric-change down">↓1.2% 较上月</div>
      </div>
    </div>

    <!-- 图表网格布局 -->
    <div class="chart-grid">
      <!-- 第一行 - 两个主要图表 -->
      <div class="chart-card large">
        <h3>工单计划与实际数量对比</h3>
        <orders-show class="chart-content" />
      </div>
      <div class="chart-card large">
        <h3>材料消耗占比</h3>
        <material-pie-chart class="chart-content" />
      </div>

      <!-- 第二行 - 三个较小图表 -->
      <div class="chart-card">
        <h3>抽检合格率趋势</h3>
        <pass-rate-chart class="chart-content" />
      </div>
      <div class="chart-card">
        <h3>缺陷类型分布</h3>
        <defect-chart class="chart-content" />
      </div>
      <div class="chart-card">
        <h3>温度变化</h3>
        <show class="chart-content" />
      </div>
    </div>
    <cutting-machine-status  class="chart-content"/>
  </div>
</template>

<script setup>
import OrdersShow from "@/views/workorder-service/component/ordersShow.vue"
import MaterialPieChart from "@/views/workorder-service/component/MaterialPieChart.vue";
import PassRateChart from "@/views/quality-service/results/PassRateChart.vue";
import DefectChart from "@/views/quality-service/reports/defectChart.vue";
import Show from "@/views/equipment-service/machine/show.vue";
import { ref } from 'vue';
import CuttingMachineStatus from "@/views/equipment-service/machine/cuttingMachineStatus.vue";

const timeRange = ref([]);

const handleTimeChange = () => {
  // 处理时间范围变化逻辑
  console.log('时间范围变化:', timeRange.value);
};
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.dashboard-header h2 {
  font-size: 24px;
  color: #333;
  margin: 0;
}

.metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.metric-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.metric-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.metric-change {
  font-size: 12px;
}

.metric-change.up {
  color: #67c23a;
}

.metric-change.down {
  color: #f56c6c;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.chart-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.chart-card.large {
  grid-column: span 1;
}

.chart-card h3 {
  font-size: 16px;
  color: #333;
  margin: 0 0 16px 0;
}

.chart-content {
  height: 500px;
}

.placeholder-chart {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  background: #f9f9f9;
  border-radius: 4px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }

  .metrics-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .metrics-row {
    grid-template-columns: 1fr;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
</style>